import React from "react";
import { View } from "react-native";
import { equals } from "solomon-utils-rn";
import styles from "./styles";

import BoxContext from "./BoxContext";

import Box from "./Box";

class BoxContainer extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      boxsPosition: [],
      moveId: "",
      overlapIds: [],
    };
  }

  shouldComponentUpdate(nextProps, nextState) {
    const { children } = this.props;
    const { moveId, overlapIds } = this.state;

    return !equals(
      {
        moveId,
        overlapIds,
        children,
      },
      {
        moveId: nextState.moveId,
        overlapIds: nextState.overlapIds,
        children: nextProps.children,
      }
    );
  }

  localInitPositon = layout => {
    const { id, y: top, x: left, width, height } = layout;

    const { boxsPosition } = this.state;
    const newBoxsPosition = [...boxsPosition];
    const index = boxsPosition.findIndex(item => item.id === id);
    const newData = {
      id,
      position: {
        top,
        bottom: top + height,
        left,
        right: left + width,
      },
    };
    if (index !== -1) {
      newBoxsPosition[index] = newData;
    } else {
      newBoxsPosition.push(newData);
    }
    this.setState({ boxsPosition: newBoxsPosition });
  };

  localOnPositionChange = ({ id, position }) => {
    const { boxsPosition } = this.state;

    const activeBox = boxsPosition
      .filter(item => item.id !== id)
      .filter(item => {
        if (
          position.bottom > item.position.top &&
          position.top < item.position.bottom &&
          position.right > item.position.left &&
          position.left < item.position.right
        ) {
          return true;
        }
        return false;
      });

    if (activeBox.length > 0) {
      this.setState({
        moveId: id,
        overlapIds: activeBox.map(item => item.id),
      });
    } else {
      this.setState({
        moveId: id,
        overlapIds: [],
      });
    }
  };

  localOnPositionChangeEnd = info => {
    const { overlapIds } = this.state;
    const { interchange, onChagneEnd } = this.props;

    onChagneEnd({
      ...info,
      overlapIds,
    });

    if (interchange) {
      this.localOnPositionChange(info); // 相应结束时间后重置选中（避免区域active异常问题）
    }
  };

  render() {
    const { overlapIds } = this.state;
    const { children, interchange, style = {} } = this.props;
    const BoxOption = {
      onInitPosition: this.localInitPositon,
      onPositionChange: this.localOnPositionChange,
      onPositionChangeEnd: this.localOnPositionChangeEnd,
      overlapIds,
      interchange,
    };
    return (
      <View style={{ ...styles.root, ...style }}>
        <BoxContext.Provider value={BoxOption}>
          {/* {children.map(child =>
            React.cloneElement(child, {
              id: child.key,
              onInitPosition: this.localInitPositon,
              onPositionChange: this.localOnPositionChange,
              overlap: overlapIds.some(id => id === child.key),
            })
          )} */}
          {children}
        </BoxContext.Provider>
      </View>
    );
  }
}

BoxContainer.Box = Box;

export default BoxContainer;
